// 项目根目录中创建了`vue.config.js`
// 导包
const autoprefixer = require('autoprefixer')
// gzip压缩优化
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 导包
const pxtorem = require('postcss-pxtorem')
const path = require('path')
// 暴露出去
module.exports = {
  // css属性如何处理
  css: {
    // 处理的选项
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          // 使用 pxtorem库进行转换
          pxtorem({
            rootValue: 37.5,
            propList: ['*']
          })
        ]
      }
    }
  },
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionWebpackPlugin({
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: productionGzipExtensions,
            threshold: 2048,
            minRatio: 0.8,
            deleteOriginalAssets: false
          })
        ]
      }
    }
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      //   使用全局less(需要使用绝对路径)
      patterns: [path.join(__dirname, './src/style/base.less')]
    }
  },
  devServer: {
    hot: true,
    proxy: {
      '/api': {
        target: process.env.VUE_APP_URL,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}
